<template>
    <view>
        <uni-segmented-control :current="menuIndex" :values="menuItems" style-type="text" active-color="#007aff" @clickItem="onClickItem" />

        <view v-if="menuIndex === 0" style="padding: 10px">
            <view v-if="unusedCoupons.length > 0" v-for="item in unusedCoupons" class="item-box">
                <view class="left">
                    <view>女神现金券{{ numberFormat(item.gaDisc, 2) }}元</view>
                    <view class="extra">仅适用于{{ item.item?.giName }}</view>
                    <view class="extra"
                        >有效期：{{ UTCTimeToLocal(item.gaStti, "YYYY-MM-DD") }} ~
                        {{ UTCTimeToLocal(item.gaEnti, "YYYY-MM-DD") }}
                    </view>
                </view>
                <view class="right">
                    <view>￥{{ item.gaDisc }}</view>
                    <button size="mini" type="warn" @click="() => gotoActivityItem($store, $refs, item, setCurrentActivityItem)">去使用</button>
                </view>
            </view>
            <u-empty v-if="unusedCoupons.length === 0" text="暂无优惠券信息"> </u-empty>
        </view>

        <view v-if="menuIndex === 1" style="padding: 10px">
            <view v-if="usedCoupons.length > 0" v-for="item in usedCoupons" class="item-box">
                <view class="left">
                    <view>女神现金券{{ numberFormat(item.gaDisc, 2) }}元</view>
                    <view class="extra">仅适用于{{ item.item?.giName }}</view>
                    <view class="extra"
                        >有效期：{{ UTCTimeToLocal(item.gaStti, "YYYY-MM-DD") }} ~
                        {{ UTCTimeToLocal(item.gaEnti, "YYYY-MM-DD") }}
                    </view>
                </view>
                <view class="right">
                    <view>￥{{ item.gaDisc }}</view>
                    <button size="mini" :disabled="true">已使用</button>
                </view>
            </view>
            <u-empty v-if="usedCoupons.length === 0" text="暂无优惠券信息"> </u-empty>
        </view>

        <view v-if="menuIndex === 2" style="padding: 10px">
            <view v-if="disabledCoupons.length > 0" v-for="item in disabledCoupons" class="item-box">
                <view class="left">
                    <view>女神现金券{{ numberFormat(item.gaDisc, 2) }}元</view>
                    <view class="extra">仅适用于{{ item.item?.giName }}</view>
                    <view class="extra"
                        >有效期：{{ UTCTimeToLocal(item.gaStti, "YYYY-MM-DD") }} ~
                        {{ UTCTimeToLocal(item.gaEnti, "YYYY-MM-DD") }}
                    </view>
                </view>
                <view class="right">
                    <view>￥{{ item.gaDisc }}</view>
                    <button size="mini" :disabled="true">已失效</button>
                </view>
            </view>
            <u-empty v-if="disabledCoupons.length === 0" text="暂无优惠券信息"> </u-empty>
        </view>
    </view>
</template>

<script>
import { mapGetters } from "vuex";
import { getItemAppointmentByGaApid } from "../../utils/api";

export default {
    components: {},
    data() {
        return {
            menuItems: ["未使用", "已使用", "已失效"],
            menuIndex: 0,
            unusedCoupons: [],
            usedCoupons: [],
            disabledCoupons: [],
            currentActivityItem: {},
        };
    },

    onLoad() {
        this.loadCoupons();
    },

    computed: {
        ...mapGetters({
            globalUserInfo: "personInfo/userInfo",
            organizationGateway: "globalInfo/organizationGateway",
            activity: "activityInfo/activity",
        }),
    },

    methods: {
        onClickItem(e) {
            if (this.menuIndex !== e.currentIndex) {
                this.menuIndex = e.currentIndex;
            }
        },

        async loadCoupons() {
            if (this.globalUserInfo.ciUuid && this.activity?.gpUuid) {
                let res = await getItemAppointmentByGaApid({
                    gaApid: this.globalUserInfo.ciUuid,
                    gpUuid: this.activity?.gpUuid,
                });
                if (res) {
                    this.unusedCoupons = res.filter((item) => item.gaStat === false && item.gaEnti > new Date().getUTCTime());
                    this.usedCoupons = res.filter((item) => item.gaStat === true);
                    this.disabledCoupons = res.filter((item) => item.gaStat === false && item.gaEnti < new Date().getUTCTime());
                }
            }
        },

        setCurrentActivityItem(item) {
            this.$store.dispatch("activityInfo/loadCurrentActivityItem", {
                giUuid: item.giUuid,
                gpUuid: item.gpUuid,
            });
        },

        gotoActivityItem($store, $refs, item, callback) {
            if (callback) callback(item);
            uni.navigateTo({
                url: `/pages/activities/detail?giUuid=${item.giUuid}&gpUuid=${item.gpUuid}`,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.item-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #feeeed;
    // height: 100px;
    margin-bottom: 10px;
}

.item-box .left {
    flex: 1;
    border-right: 1px solid #cde6c7;
    padding: 16px 0 16px 16px;
}

.item-box .extra {
    font-size: 12px;
    color: #a1a3a6;
}

.item-box .right {
    text-align: center;
    width: 35%;
}

.item-box .right button {
    margin-top: 10px;
}
</style>
